<template>
  <div class="container">

    <div class="Login-form">
      <h3>后台管理系统</h3>
      <el-form :model="LoginForm"
               :rules="rules"
               ref="ruleForm"
               class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="LoginForm.username"
                    placeholder="账号"
                    prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password"
                    v-model="LoginForm.password"
                    placeholder="密码"
                    prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked">保存密码</el-checkbox>
        <el-form-item>
          <el-button :loading="flag"
                     type="primary"
                     class="sub-btn"
                     @click="submitForm">登录</el-button>
        </el-form-item>

      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      LoginForm: {
        username: '',
        password: ''
      },
      checked: false,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.flag = true
          if (this.checked) {
            localStorage.setItem('username', this.LoginForm.username)
            localStorage.setItem('password', this.LoginForm.password)
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
          }
          const { data: res } = await this.$axios.post('/login', { username: this.LoginForm.username, password: this.LoginForm.password })
          if (res.code != 200) {
            this.flag = false
            this.$message.error(res.msg)
            return false
          }
          this.$router.push('/index')
          console.log(res)
          sessionStorage.setItem('token', res.token)
        } else {
          this.flag = false
          this.$message({ message: '请输入账号或密码', type: 'warning' })
          return false
        }
      })
    }
  },

  mounted() {
    sessionStorage.removeItem('token')
    if (localStorage.getItem('username') != null) {
      this.LoginForm.username = localStorage.getItem('username')
      this.LoginForm.password = localStorage.getItem('password')
      this.checked = true
    } else {
      this.checked = false
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background: url('../assets/images/login-bg.jpg') no-repeat 0 0/100% 100%;
  width: 100vw;
  height: 100vh;
  .Login-form {
    border-radius: 10px;
    background: #fff;
    h3 {
      margin: 0 auto 30px auto;
      text-align: center;
      color: #707070;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
      font-weight: bold;
      text-align: center;
    }
    position: absolute;
    width: 380px;
    height: 306px;
    left: calc(50% - 190px);
    top: calc(50% - 153px);
    padding: 20px 30px;
    .sub-btn {
      width: 100%;
      margin-top: 20px;
    }
  }
}
</style>